<template>
  <div id="pixi2"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { Application, Assets, Sprite } from "pixi.js";

const app = new Application();

// 加载图片
const loaderImage = async () => {
  var urlPadding = "https://g.mdcdn.cn/h5/img/act/201711/",
    act_1_animate_bg_img_arr = [];
  for (let $e = 0; $e < 11; $e++) {
    act_1_animate_bg_img_arr.push(
      urlPadding + "new-1-sky-" + ($e + 1) + ".jpg"
    );
  }
  console.log("图片资源", act_1_animate_bg_img_arr);
  const asset = await Assets.load(act_1_animate_bg_img_arr);
  console.log("asset", asset);
};

onMounted(async () => {
  await app.init({ background: "#1099bb", resizeTo: window });
  document.body.appendChild(app.canvas);
  loaderImage();
});
</script>

<style scoped></style>
